<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-on:mouseover</title>
        <script src="js/vuejs-2.5.16.js"></script>
        <style>
            #div {
                background-color: red;
                width: 300px;
                height: 300px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div v-on:mouseover="fun1" id="div">
                <textarea v-on:mouseover="fun2($event)">这是一个文件域</textarea>
            </div>

            <!--<div onmouseover="divmouseover()" id="div">
                <textarea onmouseover="textareamouseover()">这是一个文件域</textarea>
            </div>-->

        </div>
    </body>
    <script>
        //view model
        /*
            @事件名称  就是 v-on：事件名称的简写方式
            @mouseover 就等同于  v-on:mouseover
        * */
        new Vue({
            el:"#app", //由vue接管id为app区域
            methods:{
                fun1:function(){
                    alert("鼠标悬停在div上")
                },
                fun2:function(event){
                    alert("鼠标悬停在textarea上")
                    event.stopPropagation();
                }
            }
        });

        //传统的js方式
        function divmouseover(){
            alert("鼠标移动到div上了");
        }
        function textareamouseover(){
            alert("鼠标移动到textarea上了");
            event.stopPropagation();
        }

    </script>
</html>